<template>
	<view>
		<u-toast ref="uToast"></u-toast>

		<u-navbar :placeholder="true">
			<view slot="left">
				<u-sticky bgColor="#fff">
					<u-tabs lineWidth="30" lineColor="#CCAC82" @change="tabsChange" :list="tablist" :current="currentIndex" ></u-tabs>
				</u-sticky>
			</view>
		</u-navbar>
		<view v-show="currentIndex==0">
			<view class=" flex align-center bg-white padding-sm" style="width: 100%;" @click="showStoreChange=true">
				<text class="text-cut" style="max-width: 300rpx;margin-left: 10rpx;">{{changeStoreName}}</text>
				<text class="cuIcon-unfold "></text>
			</view>
			<view v-if="packagelist.length<=0" style="margin-top: 200rpx;">
				<u-empty text="暂无优惠券" mode="history"></u-empty>
			</view>
			<view v-else style="margin-top:20rpx ;padding-bottom: 200rpx;">
				<view v-for="(item,index) in packagelist" :key="index" class="margin-sm padding-sm bg-white radius">
					<view class="flex align-start justify-between ">
						<view>
							<view class="text-lg text-black text-bold">{{item.Title}}</view>
							<view class="text-sm margin-top-sm">可用范围：{{CanUseRoom(item)}}</view>
							<view class="text-sm ">有效期至：{{item.TermOfValidity?item.TermOfValidity:'无限制'}}</view>
						</view>
						<view class="flex flex-direction" style="160rpx">
							<view class="text-tea text-lg">{{item.Price}}元</view>
							<view style="text-decoration: line-through; " class="text-sm">原价：{{item.OrginPrice}}元</view>
							<button class="margin-top-lg cu-btn bg-tea radius sm"
								@click="confirmPayPackage(item)">购买</button>
						</view>
					</view>
					<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
					<view class="text-sm text-gray">{{canUseTime(item)}}</view>
				</view>
			</view>

		</view>

		<exchangepackage v-show="currentIndex==1"></exchangepackage>

		<u-picker :show="showStoreChange" :columns="columnsStore" keyName="name" @cancel="showStoreChange=false"
			@confirm="confirmStore" immediateChange>
		</u-picker>
	</view>
</template>

<script>
	import exchangepackage from '@/components/exchangepackage/exchangepackage.vue'
	export default {
		components: {exchangepackage},
		data() {
			return {
				showStoreChange: false,
				changeStoreName: '',
				changeStoreId: '',
				columnsStore: [],
				packagelist: [],

				currentIndex: 0,
				tablist: [{
					name: '卡券'
				}, {
					name: '兑换'
				}],
			}
		},
		onShow() {
			this.getStoreList();
		},
		methods: {
			tabsChange(e) {
				this.currentIndex = e.index;

			},
			//购买卡券
			confirmPayPackage(item) {
				let that = this;
				uni.showModal({
					showCancel: true,
					title: '购买确认',
					content: '确认购买此卡券么,确认后将直接从您的账户余额中扣除',
					success: function(e) {
						if (!e.confirm) {
							return;
						}
						that.buyPackage(item);
					}
				})
			},
			buyPackage(item) {
				uni.showLoading();
				uni.$u.http.post('/Customer/BuyPackage', {
					id: item.Id
				}).then(res => {
					if (res.status == -2) {
						uni.showModal({
							title: '提示',
							content: '当前余额不足，是否跳转到充值页面？',
							showCancel: true,
							success: function(e) {
								if (!e.confirm) {
									return;
								}
								uni.navigateTo({
									url: '/pagesA/member/storedcard'
								})
							}
						})
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			//获取所有房间
			getStoreList() {
				uni.$u.http.post('/Customer/GetStoreList').then(res => {
					this.columnsStore = [];
					let arry = new Array();
					res.data.forEach((x) => {
						arry.push({
							id: x.Id,
							name: x.StoreName
						})
					});
					this.columnsStore.push(arry);
					this.changeStoreId = res.data[0].Id;
					this.changeStoreName = res.data[0].StoreName;
					this.getPackageList();
				})
			},
			confirmStore(e) {
				this.showStoreChange = false;
				this.changeStoreId = e.value[0].id;
				this.changeStoreName = e.value[0].name;
				this.pageIndex = 0;
				this.getPackageList();
			},
			getPackageList() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetStorePackageList', {
					storeId: this.changeStoreId
				}).then(res => {
					this.packagelist = res.data;
				});
			},
			CanUseRoom(item) {
				return item.RoomRange.map((x) => {
					return x.roomName
				}).join('、');
			},
			canUseTime(item) {
				//该卡券适用于周一、二、三、四、五、六 22:00-06:00可用
				let day = '该卡券适用于周' +
					item.WeekList.map((x) => {
						return x.name
					}).join('、');
				day += (item.CanUseTime ? ' ' + item.CanUseTime : ' 全天通用');
				return day;
			},
		}
	}
</script>

<style>
</style>
